FE-512: Create FilterableListSubView with keyboard navigation and search by kube · Pull Request #8532 · hashintel/hash

kube · 2026-03-12T01:06:27Z

Kapture.2026-03-13.at.11.01.04.mp4

🌟 What is the purpose of this PR?

Introduces the FilterableListSubView component and a global search panel for the Petrinaut editor sidebar. This provides a reusable, keyboard-navigable list pattern for all sidebar sections, along with fuzzy search across all entities.

🔗 Related links

FE-512 (internal)

🔍 What does this change?

FilterableListSubView

Add createFilterableListSubView factory for reusable sidebar list sections
Keyboard navigation (Arrow Up/Down), range selection (Shift+Click, Shift+Arrow), multi-select (Ctrl/Cmd+Click)
Row ellipsis menu with context actions
Focus management with visual focus indicator and blur reset

Search panel

Global search triggered via Ctrl/Cmd+F or Search button in sidebar headers
Fuzzy matching using fuzzysort with highlighted match results
Keyboard navigation between search input and results (ArrowDown enters list, ArrowUp on first item returns to input)
Escape closes search; empty query shows no results

VerticalSubViewsContainer improvements

Collapsible header border hidden when collapsed
renderTitle support for custom header content (used by search input)
Token-based header height and icon sizing

Other

Centralized entity icons
Keyboard focus highlighting on Menu items and submenu triggers
TopBar title input fills available space
Fix infinite render loop in EditorProvider by removing manual useCallback/useMemo (React Compiler handles memoization)

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

modifies an npm-publishable library and I have added a changeset file(s)

📜 Does this require a change to the docs?

The changes in this PR:

are internal and do not require a docs change

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

do not affect the execution graph

❓ How to test this?

Checkout the branch and run yarn dev in libs/@hashintel/petrinaut
Open the sidebar — verify lists are keyboard navigable (Arrow keys, Shift+Click range, Ctrl+Click toggle)
Press Ctrl/Cmd+F — search panel appears with animated transition
Type to fuzzy-search entities — matches are highlighted
Use Arrow Down to navigate into results, Arrow Up on first result returns to input
Press Escape to close search

vercel · 2026-03-12T01:06:39Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hash	Ready	Preview, Comment	Mar 15, 2026 0:24am
petrinaut	Ready	Preview	Mar 15, 2026 0:24am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
hashdotdesign	Ignored	Preview	Mar 15, 2026 0:24am
hashdotdesign-tokens	Ignored	Preview	Mar 15, 2026 0:24am

kube · 2026-03-12T01:06:45Z

FE-502: Improve SDCPN file import/export with Zod validation and layout fix #8536
FE-504: Add Copy, Paste and Select All to Petrinaut editor #8533
FE-512: Create FilterableListSubView with keyboard navigation and search #8532 👈 (View in Graphite)
H-6324: Migrate petrinaut to oxlint and verify React Compiler #8539 : 4 other dependent PRs (#8537 , #8541 , #8549 and 1 other)
main

This stack of pull requests is managed by Graphite. Learn more about stacking.

cursor · 2026-03-13T00:39:53Z

PR Summary

Medium Risk
Introduces new sidebar selection/navigation behavior (keyboard handling, range/multi-select) and a new global search panel, which could regress focus/selection UX or shortcut handling despite being UI-scoped.

Overview
Adds a reusable createFilterableListSubView pattern for left-sidebar entity lists, including keyboard navigation, shift-range selection, ctrl/cmd multi-select, and per-row overflow menus for actions like delete.

Introduces a new global left-sidebar Search view (toggleable via header search buttons and Ctrl/Cmd+F) backed by fuzzysort, with highlighted fuzzy matches across nodes/types/equations/parameters and focus management via a shared searchInputRef in EditorContext.

Updates SubView/VerticalSubViewsContainer to support header icons, custom renderTitle for main headers, and alwaysShowHeaderAction, and applies various UI polish (menu highlighted states, tooltip icon variants, centralized entity-icons, minor layout/styling tweaks).

^{Written by Cursor Bugbot for commit 956fe86. This will update automatically on new commits. Configure here.}

libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx

augmentcode · 2026-03-13T00:45:51Z

🤖 Augment PR Summary

Summary: Refines Petrinaut’s vertical subview headers to better match updated UI behavior and adds reusable list subviews.

Changes:

Updated VerticalSubViewsContainer header styling: header actions/tooltip reveal on hover/focus and chevron visibility behavior.
Extended SubView to support optional header icons and an alwaysShowHeaderAction flag.
Introduced centralized entity icon exports (entity-icons.tsx) and applied them to PropertiesPanel headers.
Refactored left sidebar lists (nodes/types/parameters/differential equations) onto a new createFilterableListSubView factory with consistent row styling and per-row menus.
Adjusted menu/tooltip/section styling tokens for updated design-system alignment (highlight states, borders, radii, spacing).

Technical Notes: New filterable list subviews add keyboard navigation and multi-select range selection, and move destructive actions into an ellipsis menu using the shared Menu component.

_{🤖 Was this summary useful? React with 👍 or 👎}

augmentcode

Review completed. 3 suggestions posted.

Comment augment review to trigger a new review at any time.

augmentcode · 2026-03-13T00:45:52Z

...ashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx

+                  <item.icon size={LIST_ITEM_ICON_SIZE} />
+                </span>
+              )}
+              <span className={listItemNameStyle}>


renderItem() is wrapped in a <span>, but some callers (e.g. parameters) return a <div> which creates invalid HTML (div inside span) and can lead to layout/hydration warnings. Consider using a block wrapper or constraining renderItem to inline content.

Severity: medium

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}

Fixed — changed the <span> wrapper to <div> so block-level renderItem content doesn't create invalid HTML.

augmentcode · 2026-03-13T00:45:52Z

...ashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx

+    [items, getSelectionItem, setSelection],
+  );
+
+  const handleKeyDown = useCallback(


The listbox-level onKeyDown will also fire when focus is on nested controls (e.g. the row menu IconButton), so Enter/Space/arrow keys can interfere with opening/navigating menus. Consider ignoring key handling unless the event originated from the container itself.

Severity: medium

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}

Fixed — added event.target \!== event.currentTarget guard so the listbox-level onKeyDown ignores events bubbling from nested controls like menu buttons.

...ashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx

libs/@hashintel/petrinaut/src/views/Editor/components/BottomBar/use-keyboard-shortcuts.ts

cursor · 2026-03-13T10:10:56Z

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx

+  },
+  emptyMessage: "No global parameters yet",
+  renderHeaderAction: () => <ParametersHeaderAction />,
+});


Simulation parameter value editing feature lost in refactor

Medium Severity

The refactor from a custom component to createFilterableListSubView removed the inline NumberInput that allowed changing parameter values during simulation mode. The old code used SimulationContext (parameterValues, setParameterValue) to render an editable input for each parameter when globalMode === "simulate". The new code only hides the delete menu item in simulation mode but provides no way to edit parameter values inline.

Valid observation — the inline NumberInput for editing parameter values during simulation mode was removed when migrating to the createFilterableListSubView pattern. This will be addressed in a follow-up since it requires a per-item renderAction slot that doesn't fit the current generic list abstraction.

...ashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx

...intel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx

- Add isSearchOpen state and searchInputRef to EditorContext - Create SearchPanel subview with input in header via renderTitle - Add renderTitle to SubView type for custom main header content - Swap between normal subviews and search panel with CSS transition - Ctrl/Cmd+F opens search or focuses input if already open - Escape closes search globally via keyboard shortcuts hook - Wire Search button in FilterableListSubView header to open search Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Search all sidebar items (nodes, types, equations, parameters) with fuzzy matching via fuzzysort. Matched characters are highlighted in results. Shows match count at top, all items when query is empty. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

… call ArrowDown from the search input moves focus to the first result. ArrowUp/Down navigates through results, selecting each item. ArrowUp on the first result returns focus to the input. Also fixes the fuzzysort highlight call to use the instance method (result.highlight) instead of the non-existent static method. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Hide the Filter and Sort IconButtons from FilterHeaderAction (not yet implemented). Remove all useCallback and useMemo wrappers from changed files so the React Compiler can optimize the components. Also fix search panel to show empty state when no query and prevent onFocus render loop. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

… handler Rename getMenuItems → useMenuItems so the linter recognizes these callbacks as hooks (they call use() and useIsReadOnly() inside RowMenu's render). Add onKeyDown to the row div to satisfy the click-events-have-key-events a11y rule. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

libs/@hashintel/petrinaut/src/views/Editor/components/BottomBar/use-keyboard-shortcuts.ts

- Fix invalid HTML: change <span> to <div> for listItemNameStyle wrapper so block-level renderItem content (e.g. parameters) nests correctly - Guard listbox onKeyDown to ignore events bubbling from nested controls - Prevent Ctrl+F from intercepting inside Monaco/inputs by checking isInputFocused before handling the shortcut - Restrict Escape-to-close-search to only fire when search input is focused - Remove duplicate onKeyDown on search result rows (parent listbox handles navigation; rows now only handle Enter/Space for a11y) - Add alwaysShowHeaderAction to multi-selection panel for consistency - Remove commented-out CSS in tooltip.tsx - Update stale doc comment (getMenuItems → useMenuItems) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

The compiler flagged useMenuItems and useItems as dynamic hook props. Fix by: - Replacing useMenuItems callback with renderRowMenu component prop, so each consumer defines a proper React component (DiffEqRowMenu, ParameterRowMenu, TypeRowMenu) that calls hooks safely - Moving useItems() call from FilterableListContent into the factory's Component, passing plain items data down instead of a hook prop - Exporting RowMenu helper for consumers to render shared menu chrome Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Adds overflow: hidden to editorRootStyle so portalled menus and tooltips don't render outside the component boundary. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

There are 2 total unresolved issues (including 1 from previous review).

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

cursor · 2026-03-14T19:05:59Z

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx

+  const listRef = useRef<HTMLDivElement>(null);
+  const rowRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  const { searchInputRef } = use(EditorContext);


Duplicate use(EditorContext) call in SearchContent component

Low Severity

SearchContent calls use(EditorContext) twice — once at line 205 to destructure isSelected and selectItem, and again at line 212 to destructure searchInputRef. These could be a single use() call with a combined destructuring.

Fixed — merged the two use(EditorContext) calls into a single destructuring.

graphite-app · 2026-03-14T19:06:33Z

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/panel.tsx

+        <div
+          className={contentLayerStyle({
+            active: !isSearchOpen,
+            direction: "forward",
+          })}
+        >
+          <VerticalSubViewsContainer
+            name="left-sidebar"
+            subViews={LEFT_SIDEBAR_SUBVIEWS}
+          />
+        </div>
+        <div
+          className={contentLayerStyle({
+            active: isSearchOpen,
+            direction: "backward",
+          })}
+        >
+          <VerticalSubViewsContainer
+            name="left-sidebar-search"
+            subViews={searchSubViews}
+          />
+        </div>
+      </div>


Both content layers (main sidebar and search) are rendered simultaneously with only opacity and pointerEvents controlling visibility. The pointerEvents: 'none' prevents mouse interaction but does not prevent keyboard focus. Users can still Tab into invisible/inactive elements in the hidden layer, causing confusing navigation.

Fix: Add visibility: 'hidden' or conditionally render the inactive layer:

compoundVariants: [ { active: false, css: { transform: "translateX(-8px)", visibility: "hidden" // Prevents keyboard focus } } ]

Suggested change

<div

className={contentLayerStyle({

active: !isSearchOpen,

direction: "forward",

})}

>

<VerticalSubViewsContainer

name="left-sidebar"

subViews={LEFT_SIDEBAR_SUBVIEWS}

/>

</div>

<div

className={contentLayerStyle({

active: isSearchOpen,

direction: "backward",

})}

>

<VerticalSubViewsContainer

name="left-sidebar-search"

subViews={searchSubViews}

/>

</div>

</div>

{!isSearchOpen ? (

<div

className={contentLayerStyle({

active: true,

direction: "forward",

})}

>

<VerticalSubViewsContainer

name="left-sidebar"

subViews={LEFT_SIDEBAR_SUBVIEWS}

/>

</div>

) : (

<div

className={contentLayerStyle({

active: true,

direction: "backward",

})}

>

<VerticalSubViewsContainer

name="left-sidebar-search"

subViews={searchSubViews}

/>

</div>

)}

</div>

Spotted by Graphite

Is this helpful? React 👍 or 👎 to let us know.

Fixed — added visibility: "hidden" to the inactive content layer so keyboard focus can't reach invisible elements.

- Merge two use(EditorContext) calls into one in SearchContent - Add visibility: hidden to inactive sidebar content layer to prevent keyboard focus reaching invisible elements Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

graphite-app · 2026-03-15T23:00:04Z

Merge activity

Mar 15, 11:00 PM UTC: This pull request can not be added to the Graphite merge queue. Please try rebasing and resubmitting to merge when ready.
Mar 15, 11:00 PM UTC: Graphite disabled "merge when ready" on this PR due to: a merge conflict with the target branch; resolve the conflict and try again..

github-actions bot added area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team labels Mar 12, 2026

kube mentioned this pull request Mar 12, 2026

FE-225: Petrinaut: Setup rolldown-plugin-dts and update @typeScript/native-preview + vite #8509

Merged

3 tasks

This was referenced Mar 12, 2026

FE-515: Extract petrinaut demo-site into @apps/petrinaut-website #8528

Merged

H-5655: Refactor selection logic and migrate to @xyflow/react v12 #8523

Merged

FE-504: Add Copy, Paste and Select All to Petrinaut editor #8533

Open

vercel bot deployed to Preview – petrinaut March 12, 2026 01:09 View deployment

vercel bot deployed to Preview – hash March 12, 2026 01:14 View deployment

kube changed the base branch from cf/h-5655-refactor-selection-logic to graphite-base/8532 March 12, 2026 14:40

kube mentioned this pull request Mar 12, 2026

H-6327: Integrate Sentry feedback button into ViewportControls #8537

Open

3 tasks

kube marked this pull request as ready for review March 13, 2026 00:39

graphite-app bot assigned kube Mar 13, 2026

cursor bot reviewed Mar 13, 2026

View reviewed changes

libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx Show resolved Hide resolved

augmentcode bot reviewed Mar 13, 2026

View reviewed changes

kube force-pushed the graphite-base/8532 branch from 0b08c25 to 44fe283 Compare March 13, 2026 01:28

kube force-pushed the cf/fe-512-create-filterablelistsubview-component branch from 39823b5 to ae532f6 Compare March 13, 2026 01:28

kube changed the base branch from graphite-base/8532 to main March 13, 2026 01:28

github-actions bot added the area/deps Relates to third-party dependencies (area) label Mar 13, 2026

kube changed the title ~~Show chevron on hover in VerticalSubViewsContainer Header~~ FE-512: Create FilterableListSubView with keyboard navigation and search Mar 13, 2026

vercel bot deployed to Preview – petrinaut March 13, 2026 01:32 View deployment

cursor bot reviewed Mar 13, 2026

View reviewed changes

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx Show resolved Hide resolved

vercel bot had a problem deploying to Preview – hash March 13, 2026 02:14 Failure

vercel bot deployed to Preview – petrinaut March 13, 2026 10:09 View deployment

cursor bot reviewed Mar 13, 2026

View reviewed changes

vercel bot had a problem deploying to Preview – hash March 13, 2026 10:19 Failure

graphite-app bot reviewed Mar 13, 2026

View reviewed changes

...intel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx Outdated Show resolved Hide resolved

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx Show resolved Hide resolved

kube and others added 6 commits March 14, 2026 14:55

Update ui-subviews

1f4fa9b

kube force-pushed the cf/fe-512-create-filterablelistsubview-component branch from 4531039 to e2322e2 Compare March 14, 2026 13:55

vercel bot had a problem deploying to Preview – petrinaut March 14, 2026 13:57 Failure

vercel bot had a problem deploying to Preview – hash March 14, 2026 13:58 Failure

cursor bot reviewed Mar 14, 2026

View reviewed changes

libs/@hashintel/petrinaut/src/views/Editor/components/BottomBar/use-keyboard-shortcuts.ts Show resolved Hide resolved

kube and others added 3 commits March 14, 2026 19:30

Clip overflow on editor root to hide menus when collapsed

981a51a

Adds overflow: hidden to editorRootStyle so portalled menus and tooltips don't render outside the component boundary. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

vercel bot had a problem deploying to Preview – petrinaut March 14, 2026 19:04 Failure

cursor bot reviewed Mar 14, 2026

View reviewed changes

graphite-app bot reviewed Mar 14, 2026

View reviewed changes

vercel bot deployed to Preview – hash March 14, 2026 19:15 View deployment

This was referenced Mar 14, 2026

FE-502: Improve SDCPN file import/export with Zod validation and layout fix #8536

Open

FE-514: Compile TypeScript expressions to SymPy #8541

Draft

FE-514: Add SymPy → JavaScript compilation pipeline via Pyodide #8548

Draft

kube requested a review from CiaranMn March 14, 2026 19:59

vercel bot deployed to Preview – petrinaut March 15, 2026 00:21 View deployment

vercel bot deployed to Preview – hash March 15, 2026 00:24 View deployment

graphite-app bot requested a review from a team March 15, 2026 00:26

kube changed the base branch from cf/h-6324-migrate-petrinaut-to-oxlint-and-verify-react-compiler to graphite-base/8532 March 15, 2026 16:20

This was referenced Mar 15, 2026

FE-518: Add Storybook and update build/lint setup for refractive #8549

Open

Enable React Compiler for SimulationTimeline chart components #8550

Draft

FE-43: Add alternative OBB and polar distance map filters for refractive #8552

Draft

Conversation

kube commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🌟 What is the purpose of this PR?

🔗 Related links

🔍 What does this change?

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

📜 Does this require a change to the docs?

🕸️ Does this require a change to the Turbo Graph?

❓ How to test this?

Uh oh!

vercel bot commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kube commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor bot commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Uh oh!

Uh oh!

augmentcode bot commented Mar 13, 2026

Uh oh!

augmentcode bot left a comment

Choose a reason for hiding this comment

Uh oh!

augmentcode bot Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

kube Mar 14, 2026

Choose a reason for hiding this comment

Uh oh!

augmentcode bot Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

kube Mar 14, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot Mar 13, 2026

Choose a reason for hiding this comment

Simulation parameter value editing feature lost in refactor

Uh oh!

kube Mar 14, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Mar 14, 2026

Choose a reason for hiding this comment

Duplicate use(EditorContext) call in SearchContent component

Uh oh!

kube Mar 15, 2026

Choose a reason for hiding this comment

Uh oh!

graphite-app bot Mar 14, 2026

Choose a reason for hiding this comment

Uh oh!

kube Mar 15, 2026

Choose a reason for hiding this comment

Uh oh!

graphite-app bot commented Mar 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

kube commented Mar 12, 2026 •

edited

Loading

vercel bot commented Mar 12, 2026 •

edited

Loading

kube commented Mar 12, 2026 •

edited

Loading

cursor bot commented Mar 13, 2026 •

edited

Loading

Duplicate `use(EditorContext)` call in SearchContent component

graphite-app bot commented Mar 15, 2026 •

edited

Loading